<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery01_05动画</title>
		<style type="text/css">
			#a, #b, #c {
				width: 200px;
				height: 200px;				
				float: left;
			}
			#a {
				background: red;
			}
			#b {
				background: blue;
			}
			#c {
				background: green;
			}
			#aa {
				width: 300px;
				height: 300px;	
				background: yellow;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="a"></div>
		<div id="b"></div>
		<div id="c"></div>
		<div id="aa">这是div 的aa</div>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<input type="button"  value="显示" id="show" />
		<input type="button"  value="隐藏"	id="hidden" />
		<input type="button"  id="special" value="特殊" />
		<input type="button"  id="fin" value="淡入" />
		<input type="button"  id="fout" value="淡出" />
		<input type="button"  id="special1" value="特殊入出" />
		<input type="button"  id="sliderIn" value="滑入" />
		<input type="button"  id="sliderOut" value="滑出" />		
		<input type="button"  id="special2" value="特殊2" />
		<input type="button"  id="custom1" value="自定义动画1" />
		<input type="button"  id="custom2" value="自定义动画2" />
		<input type="button"  id="custom3" value="自定义动画3" />
		<input type="button"  id="stopAnimation" value="停止动画" />
		<script src="JQuery/jquery.color.js" type="text/javascript" charset="utf-8"></script>
		<script src="JQuery/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//♦️显示隐藏的动画  修改的是display + width + height
			$("#hidden").click(function(){
				//隐藏动画hide(动画时长/过程, 函数),参数不是必须的.
				$("#a").hide();
//				$("#b").hide(1000);
				//过程slow, normal, fast
				$("#b").hide("fast");
				$("#c").hide("1000",function(){
					//该函数当动画完成时触发
					console.log("隐藏已完成");
				});
			});
			//显示 show(动画时长/过程, 函数),参数不是必须的
			$("#show").click(function(){
				$("#c").show(1000);
				$("#b").show("fast");
				$("#a").show("1000",function(){
					console.log("显示已完成");
				});
			});
			
			//特殊的(如果当时状态为隐藏就显示,如果当时状态为显示,就隐藏)
			//toggle()
			$("#special").click(function(){
				$("#a").toggle(1000);
				$("#b").toggle("fast");
				$("#c").toggle("1000",function(){
					//该函数当动画完成时触发
					console.log("隐藏/显示已完成");
				});
			});
			
			//♦️淡入淡出效果  display + opacity
			//淡入 fadein
			//淡出fadeut 
			//变化到指定透明度fadeTo
			
			//淡入
			$("#fin").click(function(){
				$("#a").fadeIn(1000);
				$("#b").fadeIn("fast");
				$("#c").fadeIn("1000",function(){
					//该函数当动画完成时触发
					console.log("淡入已完成");
				});
			});
			
			//淡出
			$("#fout").click(function(){
				$("#a").fadeOut(1000);
				$("#b").fadeOut("fast");
				$("#c").fadeOut("1000",function(){
					//该函数当动画完成时触发
					console.log("淡出已完成");
				});
			});
			
			
			//淡入淡出特殊(指定变化到指定的透明度)
			//fadeTo(动画时长/过程 , 指定的透明度, 函数)
			$("#special1").click(function(){
				$("#a").fadeTo("slow", 0.7)
				$("#b").fadeTo("fast", 0.5);
				$("#c").fadeTo("1000", 0.3, function(){
					//该函数当动画完成时触发
					console.log("特殊淡入已完成");
				});
			});
			
			//滑动出现隐藏动画  display + height
			//sliderUp上滑   sliderDown下滑
			//滑入
			$("#sliderIn").click(function(){
				$("#a").slideUp(1000);
				$("#b").slideUp("slow");
				$("#c").slideUp(1000,function(){
					console.log("隐藏已完成");
				});
			});
			
			//滑出
			$("#sliderOut").click(function(){
				$("#a").slideDown(1000);
				$("#b").slideDown("slow");
				$("#c").slideDown(1000,function(){
					console.log("出现已完成");
				});
			});
			
			//特殊◀️
			$("#special2").click(function(){
				$("#a").slideToggle(1000);
				$("#b").slideToggle("slow");
				$("#c").slideToggle(1000,function(){
					console.log("出现/隐藏已完成");
				});
			});
			
			//自定义动画1 :同时修改元素的多个属性
			$("#custom1").click(function(){
				$("#aa").animate({
					width:"500",
					height:"500",
					fontSize:"100",
					color:"red"
				},1000);
			});
			//注:动画的要修的属性,名应该写驼峰法 eg:应该写成fontSize,不能写成font-size
			
			
			//自定义动画2:可以在当前属性值的基础上进行加减.
			$("#custom2").click(function(){
				$("#aa").animate({
					width:"+=100",
					height:"-=100",
				},1000);
			});
			//注:只能加减不能乘除.
			
			//自定义动画3:队列动画
			$("#custom3").click(function(){
				$("#aa").animate({
					width:"+=200",
					height:"+=200",
					borderRadius:"0%",
					background:"red"
				},4000);
				$("#aa").animate({
					height:"+=100",
					borderRadius:"50%",
					background:"blue"
				},2000);
				$("#aa").animate({
					height:"-=200",
					borderRadius:"0%",
					backgroun:"green"
				},3000);
				$("#aa").animate({
					width:"-=300",
					borderRadius:"50%"
				},1000);
			});
			
			//停止动画
			//stop(stopAll, goToEnd);
			//stopAll是否停止队列中的动画,默认是false
			//goToEnd:是否直接完成动画,默认是false
			$("#stopAnimation").click(function(){
				$("#aa").stop(true, false);
			});
		</script>
	</body>
</html>
